<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> Stu Nicholls | CSSplay | A Pull Down Panel with Multi level Menu</title>
<meta name="Author" content="Stu Nicholls">
<meta name="Keywords" content="cssplay, css, play, Cascading, Style, Sheets, experiments, demonstrations, menu, information, panel, professional, pull, down, iPad, iPhone, iPod, Touch">
<meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS">
<meta name="verify-v1" content="n3Dpx4NklZjg5p/Tq7h1q+Oj6Ml83crtkO/PwepVQ6Y=">
<meta http-equiv="imagetoolbar" content="no">


<link rel="meta" href="http://www.cssplay.co.uk/labels.rdf" type="application/rdf+xml" title="ICRA labels">
<meta http-equiv="pics-Label" content="(pics-1.1 &quot;http://www.icra.org/pics/vocabularyv03/&quot; l gen true for &quot;http://cssplay.co.uk&quot; r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0)  gen true for &quot;http://www.cssplay.co.uk&quot; r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0))">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.cssplay.co.uk/feed.xml">
<link rel="shortcut icon" href="http://www.cssplay.co.uk/favicon.ico" type="image/x-icon">
<link rel="icon" href="http://www.cssplay.co.uk/favicon.ico" type="image/ico">
<style type="text/css">
@import url(http://www.google.com/cse/api/branding.css);
</style>
<link rel="stylesheet" media="all" type="text/css" href="%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95_files/default.css">

<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/cssplay23.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* for Internet Explorer to replace :target */
a#pull,
a#push {behavior:url(cssplay23/target.htc)}

#pulldown {width:100%; height:400px; left:0; position:fixed; z-index:800;
transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
}
.close {top:-400px;}

#opacity {position:absolute; width:100%; left:0; height:400px; background:#333; border-bottom:1px solid #222; opacity:0.9; filter: alpha(opacity=90);
-o-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}
#contents {height:400px; width:100%; left:0; position:absolute; color:#fff; background:url(cssplay23/top-back.gif) repeat-x; text-align:center; overflow:hidden;}
#lowerContent {width:750px; margin:40px auto 0 auto;}
#lowerContent dl {width:238px; margin:0 5px; padding:5px 0; background:#555; float:left; text-align:left; border:1px solid #888;}
#lowerContent dl dt {color:#ff8000; font:bold 12px/25px arial, sans-serif; padding:0 5px;}
#lowerContent dl dd {color:#aaa; font:12px/18px arial, sans-serif; margin:0; padding:0 5px;}
#lowerContent dl dd a {color:#ddd;}
#lowerContent dl dd a:hover {color:#fff;}


a#pull {display:block; position:absolute; z-index:100; bottom:-30px; color:#fff; left:50%; background:url(cssplay23/close.png); z-index:-1; width:200px; margin-left:-100px; height:30px; text-align:center;
text-decoration:none; font-family:arial, sans-serif; font-size:14px; line-height:30px;}

a#push {display:none; position:absolute; z-index:100; bottom:-30px; color:#fff; left:50%;background:url(cssplay23/open.png); z-index:-1; width:200px; margin-left:-100px;  height:30px; text-align:center;
text-decoration:none; font-family:arial, sans-serif; font-size:14px; line-height:30px;}

#pulldown:target {top:0;}
#pulldown:target #pull {display:none;}
#pulldown:target #push {display:block;}

/* for IE 8 and lower */
.open {top:0;}
.open #pull {display:none;}
.open #push {display:block;}

.close {top:-400px;}
.close #pull {display:block;}
.close #push {display:none;}

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/ipad-droplist.html
Copyright (c) 2005-2011 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

/* this is a CSS answer to fix the hover/focus '~' and hover/focus '+' problem in safari and chrome */
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;} 
100% {zoom:1;}
}

.nav {width:745px; height:36px; background:#666; position:relative; z-index:100; font-family:arial, sans-serif; margin:0 auto; border-top:5px solid #ff8000; border-bottom:1px solid #000; text-align:left;}
.menu,
.menu ul {padding:0; margin:0; list-style:none;}
.menu {width:730px; border-top:1px solid #333; padding-left:15px;}

.menu ul.sub {position:absolute; left:-9999px; top:35px; background:#444; padding:0 0 0 10px; z-index:-1; border-top:1px solid #999;}
.menu ul.sub1 {width:150px;}
.menu ul.sub2 {width:300px;}
.menu ul.sub3 {width:450px;}
.menu ul.sub h5 {padding:4px 0; margin:0; color:#ff8000; font-size:12px; width:140px; line-height:18px;}

.menu li.top-li {float:left; position:relative; background:#666; z-index:50;}
.menu li.top-li a.top-a {display:block; float:left; line-height:35px; color:#ccc; padding:0 18px 0 10px; text-decoration:none; font-size:14px;}

.menu li.top-li a.top-a:hover {background:#444; color:#fff;}
.menu li.top-li:hover > a.top-a {background:#444; color:#fff;}
.menu li.has-sub a.top-a:hover {height:36px;}
.menu li.has-sub:hover > a.top-a {height:36px;}

.menu li.close a {position:absolute; left:50%; top:-30px; width:100px; height:30px; line-height:30px; color:#fff; font-weight:bold; font-size:12px; padding:0; margin:0 0 0 -50px; background:#ff8000; text-align:center; text-decoration:none; display:none;}

.menu ul li {width:150px; float:left;}
.menu ul li a {line-height:15px; color:#fff; background:#666; display:block; width:120px; margin-bottom:1px; padding:3px 10px; text-decoration:none; font-size:12px;}
.menu ul li a:hover {background:#ccc; color:#000;}
.menu ul li.bottomLine {width:100%; clear:left; padding:5px 10px 5px 0; background:#333; margin-left:-10px; margin-top:5px; border-top:1px solid #888;}
.menu ul li.bottomLine p {padding:0; margin:0; line-height:20px; font-size:12px; color:#ff8000; font-weight:bold; width:100%; padding-left:10px;}
.menu ul li.bottomLine a {display:inline; padding:0 3px; line-height:20px; background:none; color:#ccc;}
.menu ul li.bottomLine a:hover {color:#fff;}

.menu :hover ul.sub {left:0;}
.menu :hover ul.left1 {left:-150px;}

/* for IE6 */
.menu table {border-collapse:collapse; margin-bottom:-1px;}
* html .menu ul.sub {border:0;}
* html .menu ul li.bottomLine {padding:5px 0 5px 10px;}
* html #pulldown {position:absolute;}

</style>


<script async="async" src="%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95_files/s_1e5949aa72023d7e6519f404fd6280d6.js" id="_bsap_js_1e5949aa72023d7e6519f404fd6280d6" type="text/javascript"></script></head>

<body id="www-cssplay-co-uk">

	<div id="wrapper">
	<a href="#content" class="hiddenfromview" accesskey="X" title="skip to content">skip to content</a>
		<div id="topad">
	<!-- <img src="http://www.cssplay.co.uk/newweb/ads/468x60.gif" alt="" /> -->
	<div style="float:left; width:468px; height:60px;">
	<script type="text/javascript">
Vertical1242022 = false;
ShowAdHereBanner1242022 = true;
RepeatAll1242022 = false;
NoFollowAll1242022 = false;
BannerStyles1242022 = new Array(
    "a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0;text-align:center;text-decoration:none;overflow:hidden; float:left;}",
    "img{border:0;}",
    "a.adhere{color:#666;font-weight:bold;font-size:12px;background:#f8f8f8;text-align:center;}",
    "a.adhere:hover{background:#ddd;color:#333;}"
);
document.write(unescape("%3Cscript src='"+document.location.protocol+"//s3.buysellads.com/1242022/1242022.js?v="+Date.parse(new Date())+"' type='text/javascript'%3E%3C/script%3E"));
</script><script src="%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95_files/1242022.js" type="text/javascript"></script><style type="text/css">div.bsap_1242022 {width:100%;display:block;} div.bsap_1242022 a{width:468px;} div.bsap_1242022 a img{padding:0;} div.bsap_1242022 a em{font-style:normal;} div.bsap_1242022 a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0;text-align:center;text-decoration:none;overflow:hidden; float:left;} div.bsap_1242022 img{border:0;} div.bsap_1242022 a.adhere{color:#666;font-weight:bold;font-size:12px;background:#f8f8f8;text-align:center;} div.bsap_1242022 a.adhere:hover{background:#ddd;color:#333;} div.bsap_1242022 a.adhere{width:468px;height:60px;line-height:480%;} html>body div.bsap_1242022 a.adhere{width:466px;height:58px;} div.bsap_1242022 img.s{height:0;width:0;}div#bsap_1242022 {width:100%;display:block;} div#bsap_1242022 a{width:468px;} div#bsap_1242022 a img{padding:0;} div#bsap_1242022 a em{font-style:normal;} div#bsap_1242022 a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0;text-align:center;text-decoration:none;overflow:hidden; float:left;} div#bsap_1242022 img{border:0;} div#bsap_1242022 a.adhere{color:#666;font-weight:bold;font-size:12px;background:#f8f8f8;text-align:center;} div#bsap_1242022 a.adhere:hover{background:#ddd;color:#333;} div#bsap_1242022 a.adhere{width:468px;height:60px;line-height:480%;} html>body div#bsap_1242022 a.adhere{width:466px;height:58px;} div#bsap_1242022 img.s{height:0;width:0;}</style><script type="text/javascript" src="%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95_files/bsa.js" id="bsap_js"></script><div id="bsap_1242022" class="bsap_1242022 bsap"><a href="http://buysellads.com/buy/detail/13607/zone/1242022?utm_source=site_13607_zone_1242022&amp;utm_medium=website&amp;utm_campaign=adhere" title="Advertise Here" class="adhere ad1 odd" target="_blank">Advertise Here</a></div>
</div>
	<img src="%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95_files/shadow_logo.png" alt="">
	<a href="http://www.ibuilt.net/" title="Website Builder" id="ibuilt"><img src="%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95_files/avw.jpeg" alt="Website Builder" title="Website Builder"></a>
	</div>
		<div id="header">
		<div id="logo">
		
			<h1><a accesskey="1" href="http://www.cssplay.co.uk/index" title="Home Page">CSS</a></h1>
			<h2><a accesskey="1" href="http://www.cssplay.co.uk/index" title="Home Page"><i>p</i>lay</a></h2>
			<h3>Experiments with Cascading Style Sheets</h3>
			</div> <!-- end of logo -->
			<div id="toplink">
			<ul>
			<li><a accesskey="W" href="http://www.cssplay.biz/" title="CSSplay.biz Website" rel="nofollow">CSSPLAY.BIZ</a></li>
			<li><a accesskey="H" href="http://www.cssplay.co.uk/service" title="Help and Services">HELP &amp; ASSISTANCE</a></li>
			<li><a accesskey="Q" href="http://www.cssplay.co.uk/faqs" title="Frequently Asked Questions">FAQs</a></li>
			<li><a accesskey="N" href="http://www.cssplay.co.uk/w3c/contact" title="Contact us">CONTACT ME</a></li><li><a accesskey="V" href="http://www.cssplay.co.uk/w3c/privacy" title="Privacy Policy">PRIVACY POLICY</a></li>			<li><a accesskey="S" href="http://www.cssplay.co.uk/sitemap" title="Site map">SITE MAP</a></li>
			<li><a accesskey="K" href="http://www.cssplay.co.uk/accesskeys" title="Accesskeys">ACCESSKEYS</a></li>
			<li><a accesskey="P" href="http://www.cssplay.co.uk/support" title="Support">SUPPORT</a></li>
						<li><a accesskey="R" href="http://www.cssplay.co.uk/feed.xml" title="RSS2.0 feed"><img src="%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95_files/rss.png" alt="rss feed" title="RSS2.0 feed"></a></li>

			</ul>
			</div>
			<div id="midlink">
			<ul id="main_menu">
			<li class="demos"><a accesskey="A" href="http://www.cssplay.co.uk/menu/">Demos</a></li><li class="menus"><a class="chosen" accesskey="M" href="http://www.cssplay.co.uk/menus/">Menus</a></li><li class="layouts"><a accesskey="Y" href="http://www.cssplay.co.uk/layouts/">Layouts</a></li><li class="boxes"><a accesskey="B" href="http://www.cssplay.co.uk/boxes/">Boxes</a></li><li class="mozilla"><a accesskey="Z" href="http://www.cssplay.co.uk/mozilla/">Mozilla</a></li><li class="explorer"><a accesskey="E" href="http://www.cssplay.co.uk/ie/">Explorer</a></li><li class="opacity"><a accesskey="O" href="http://www.cssplay.co.uk/opacity/">Opacity</a></li>			<li class="java"><a accesskey="J" href="http://www.stunicholls.com/" title="Over to http://www.stunicholls.com" rel="nofollow">Javascript</a></li>
			</ul>
			</div>
			<div id="botlink">
			<ul id="sub_menu">

			<li><a accesskey="H" href="http://www.cssplay.co.uk/index">HOME</a></li>
			<li><a href="http://www.cssplay.co.uk/menus/index.html" accesskey="F" title="First - Section List">LIST</a></li><li><a href="http://www.cssplay.co.uk/menus/pull-down-info-panel.html" accesskey="P" title="Previous">PREVIOUS</a></li><li><a href="http://www.cssplay.co.uk/menus/three-up-two-down.html" accesskey="N" title="Next">NEXT</a></li><li><a href="http://www.cssplay.co.uk/menus/vertical_slide.html" accesskey="L" title="Last">LAST</a></li>			<li><a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=Pull%20Down%20Drop%20Menu" accesskey="C" title="Comments for this page">COMMENTS</a></li>
			<li>TUTORIAL</li>			</ul>
			</div> <!-- end of botlink -->
		<div id="search">
<div class="cse-branding-right" style="background-color:transparent;color:#000000">
  <div class="cse-branding-form">
    <form action="http://www.cssplay.co.uk/search.html" id="cse-search-box">
      <div>
        <input name="cx" value="partner-pub-6651950180071236:chrtwm-4ria" type="hidden">
        <input name="cof" value="FORID:10" type="hidden">
        <input name="ie" value="UTF-8" type="hidden">
        <input name="q" size="19" class="search" type="text">
        <input name="sa" value=" Search" type="submit">
      </div>
    </form>
  </div>
  <div class="cse-branding-logo">
    <img src="%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95_files/poweredby_AAAAAA.gif" alt="Google">
  </div>
  <div class="cse-branding-text">
    Custom Search
  </div>
</div>
		</div> <!-- end of search -->

		</div> <!-- end of header -->

<div id="info">

<h2>A Pull Down Panel with Multi level Menu</h2>
<h3>28th March 2011</h3>
<p class="info">For IE6, IE7, IE8, IE9, Firefox, Opera, Safari, Chrome, Flock, SeaMonkey, iPhone, iPod Touch and iPad.</p>

<h2>Click the tab at the top center of the browser for pull down information panel with multi level dropdown menu demonstration.</h2>
<br><br>
<a href="http://twitter.com/home?status=Currently%20testing%20a%20new%20menu%20from%20@stucssplay%20here%20http://www.cssplay.co.uk/menus/cssplay23.html" rel="nofollow" class="tweet"><img src="%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95_files/tweet.gif" alt="tweet this"></a>

<p class="info">copyright ©2011 stu nicholls - css play</p>
<br>

</div> <!-- end of info -->
<div id="info_right">
<div class="box250">
<h3>CSS play Support</h3>
<div style="width:248px; border:1px solid #ddd; background:#fff; border-width:0 1px; text-align:center;">
<br>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<div>
<input name="cmd" value="_s-xclick" type="hidden">
<input name="hosted_button_id" value="3206316" type="hidden">
<input src="%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95_files/paypal2.png" name="submit" alt="PayPal - The safer, easier way to pay online." type="image">
<img alt="" src="%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95_files/pixel.gif" width="1" height="1">
</div>
</form>
</div>
</div>

<div class="box250">
<h3>CSS play Recommend</h3>
<p>
<a class="bannerad" href="http://www.dynamicdrive.com/style/"><img src="%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95_files/dynamicdrive.gif" alt="Free, practical CSS menus, layouts, and examples" title="Free, practical CSS menus, layouts, and examples" width="220" height="100"></a>
</p>
<b class="clear"></b>
</div>

<div class="box250">
<h3>Follow CSS play</h3>
<p>
<a href="http://www.facebook.com/pages/CSS-play/133940426647902" rel="nofollow"><img src="%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95_files/facebook.png" alt="Facebook"></a>&nbsp;&nbsp;&nbsp;<a href="http://twitter.com/stucssplay" rel="nofollow"><img src="%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95_files/twitter.png" alt="Twitter"></a>&nbsp;&nbsp;&nbsp;<a href="http://www.cssplay.co.uk/facebook-fan-page.html" rel="nofollow"><img src="%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95_files/fanpage.jpg" alt="Facebook Fan Page"></a>
</p>
<b class="clear"></b>
</div>


<script type="text/javascript"><!--
google_ad_client = "pub-6651950180071236";
/* 250x250, created 2/2/11 */
google_ad_slot = "3830893092";
google_ad_width = 250;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript" src="%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95_files/show_ads.js">
</script><ins style="display:inline-table;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:250px"><ins id="aswift_0_anchor" style="display:block;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:250px"><iframe allowtransparency="true" hspace="0" marginwidth="0" marginheight="0" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){i+='.call';setTimeout(h,0)}else if(h.match){i+='.nav';w.location.replace(h)}s.log&amp;&amp;s.log.push(i)}" vspace="0" id="aswift_0" name="aswift_0" style="left: 0pt; position: absolute; top: 0pt;" scrolling="no" width="250" frameborder="0" height="250"></iframe></ins></ins>

<br><br>




<div style="padding-left:15px; height:100px;">
<script type="text/javascript">
Vertical1241863 = false;
ShowAdHereBanner1241863 = true;
RepeatAll1241863 = false;
NoFollowAll1241863 = false;
BannerStyles1241863 = new Array(
    "a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0;text-align:center;text-decoration:none;overflow:hidden;}",
    "img{border:0; margin-bottom:8px;}",
    "a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ddd;background:#f8f8f8;text-align:center;}",
    "a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}"
);
document.write(unescape("%3Cscript src='"+document.location.protocol+"//s3.buysellads.com/1241863/1241863.js?v="+Date.parse(new Date())+"' type='text/javascript'%3E%3C/script%3E"));
</script><script src="%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95_files/1241863.js" type="text/javascript"></script><style type="text/css">div.bsap_1241863 {width:100%;display:block;} div.bsap_1241863 a{width:220px;} div.bsap_1241863 a img{padding:0;} div.bsap_1241863 a em{font-style:normal;} div.bsap_1241863 a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0;text-align:center;text-decoration:none;overflow:hidden;} div.bsap_1241863 img{border:0; margin-bottom:8px;} div.bsap_1241863 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ddd;background:#f8f8f8;text-align:center;} div.bsap_1241863 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;} div.bsap_1241863 a.adhere{width:220px;height:100px;line-height:800%;} html>body div.bsap_1241863 a.adhere{width:218px;height:98px;} div.bsap_1241863 img.s{height:0;width:0;}div#bsap_1241863 {width:100%;display:block;} div#bsap_1241863 a{width:220px;} div#bsap_1241863 a img{padding:0;} div#bsap_1241863 a em{font-style:normal;} div#bsap_1241863 a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0;text-align:center;text-decoration:none;overflow:hidden;} div#bsap_1241863 img{border:0; margin-bottom:8px;} div#bsap_1241863 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ddd;background:#f8f8f8;text-align:center;} div#bsap_1241863 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;} div#bsap_1241863 a.adhere{width:220px;height:100px;line-height:800%;} html>body div#bsap_1241863 a.adhere{width:218px;height:98px;} div#bsap_1241863 img.s{height:0;width:0;}</style><script type="text/javascript"> _bsap.drop("1e5949aa72023d7e6519f404fd6280d6", 1241863); </script><div id="bsap_1241863" class="bsap_1241863 bsap"><a href="http://stats.buysellads.com/click.go?z=1241863&amp;b=993977&amp;g=&amp;s=&amp;sw=1680&amp;sh=1050&amp;br=firefox,4,win&amp;r=0.4579811446048183&amp;link=http://www.squarespace.com/signup2/?source=cssplay2&amp;campaign=createwebsites&amp;utm_source=cssplay2&amp;utm_medium=banner&amp;utm_campaign=createwebsites" onmouseover="window.status = 'http://www.squarespace.com/signup2/?source=cssplay2&amp;campaign=createwebsites&amp;utm_source=cssplay2&amp;utm_medium=banner&amp;utm_campaign=createwebsites'; return true;" onmouseout="window.status=''; return true;" class="ad1 odd" title="Squarespace | Create beautiful websites." id="bsa_993977" target="_blank"><img src="%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95_files/55086-1301083375.png" alt="Squarespace | Create beautiful websites." width="220" height="100"></a></div>
</div>
<!-- moved to cssplay-pages --><br> <!-- now moved to code -->
</div>

<div id="content">
<div class="plain752" style="margin-top:-15px;">
<script type="text/javascript"><!--
google_ad_client = "pub-6651950180071236";
/* 728x90, created 3/24/09 */
google_ad_slot = "2160454816";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript" src="%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95_files/show_ads.js">
</script><ins style="display:inline-table;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px"><ins id="aswift_1_anchor" style="display:block;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px"><iframe allowtransparency="true" hspace="0" marginwidth="0" marginheight="0" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){i+='.call';setTimeout(h,0)}else if(h.match){i+='.nav';w.location.replace(h)}s.log&amp;&amp;s.log.push(i)}" vspace="0" id="aswift_1" name="aswift_1" style="left: 0pt; position: absolute; top: 0pt;" scrolling="no" width="728" frameborder="0" height="90"></iframe></ins></ins>
</div>
<br class="clear"><br>
<div class="prevNext"><a href="http://www.cssplay.co.uk/menus/pull-down-info-panel.html" accesskey="P" title="Previous Demonstration" class="prevDemo"><b>PREVIOUS</b></a><a href="http://www.cssplay.co.uk/menus/three-up-two-down.html" accesskey="N" title="Next Demonstration" class="nextDemo"><b>NEXT</b></a></div>
<div id="left_column">
<h3>Information</h3>

<p>Although the first demo in this series had a pull down panel that 
worked on the iPad etc. and a menu that also works on the iPad etc. when
 combined the menu fails to open sub menus correctly. So this demo 
rectifies the problem.</p>
<p>Now the pull down panel and the dropdown menu work correctly on the 
iPad, iPhone and iPod Touch and has a slide down action in Safari, 
Chrome, Opera and Firefox v4.</p>
<p>I have replaced the previous Internet Explorer javascript :target 
emulator with a simple single line .htc file which does the same job and
 allows the demo to work using just one stylesheet and no separate 
javascript file.</p>
<div>
<br>
<div class="plain470">
<script type="text/javascript"><!--
google_ad_client = "pub-6651950180071236";
/* 468x60, created 3/20/09 */
google_ad_slot = "7558797043";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript" src="%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95_files/show_ads.js">
</script><ins style="display:inline-table;border:none;height:60px;margin:0;padding:0;position:relative;visibility:visible;width:468px"><ins id="aswift_2_anchor" style="display:block;border:none;height:60px;margin:0;padding:0;position:relative;visibility:visible;width:468px"><iframe allowtransparency="true" hspace="0" marginwidth="0" marginheight="0" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){i+='.call';setTimeout(h,0)}else if(h.match){i+='.nav';w.location.replace(h)}s.log&amp;&amp;s.log.push(i)}" vspace="0" id="aswift_2" name="aswift_2" style="left: 0pt; position: absolute; top: 0pt;" scrolling="no" width="468" frameborder="0" height="60"></iframe></ins></ins>
</div>
<br class="clear"><br>
</div>
<h3>Copyright</h3>
<p>Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.</p>
<p>1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.<br><span class="red">A donation to the '<a href="http://www.cssplay.co.uk/support.html">Support <b class="css">CSS</b><span class="play">play</span></a>' fund is now required for this demonstration.</span></p>
<p>2. If you are using this on a commercial web site, or as a paying job
 for a client, then please email me asking for permission - 
stu{at}cssplay.co.uk <span class="red">and again a donation to the '<a href="http://www.cssplay.co.uk/support.html">Support <b class="css">CSS</b><span class="play">play</span></a>' fund is required.</span></p>
<p>3. If you are having problems integrating any of my demonstrations 
into your website then I now offer a service to fault find and correct 
any errors that you may have introduced. Please email me for more 
information.</p>
<h3>Terms and Conditions</h3>
<p>This menu can be used subject to the following terms and conditions.</p>
<ol>
<li>If you wish to use this menu in your website(s) please email me stu{at}cssplay.co.uk seeking permission.</li>
<li>You may NOT place this menu on another site for others to download.</li>
<li>You may NOT redistrubute or resell this menu.</li>
<li>Users agree not to remove or edit the credit notice within the stylesheet, or claim that this menu is their own.</li>
</ol>
</div>


<div id="right_column">
<br>
<div class="plain250">
<div>
<span class="spacer"></span>

<ul class="cssplay">
<li>
<br></li></ul>
</div>
</div>

<div class="plain250">
<div>
<span class="spacer"></span>
<ul class="cssplay">
<li>
Each week the Creare Group produce video tutorials for <a href="http://www.crearecommunications.co.uk/">SEO</a> and tips and tricks for the <a href="http://www.crearedesign.co.uk/">web design</a> industry.
</li></ul>
</div>
</div>

<div class="plain250">
<div>
<span class="spacer"></span>
<ul class="cssplay">
<li>
Web designers <a href="http://www.protectyourbubble.com/li-laptop-insurance.html">insure your laptop</a> or macbook with Protect Your Bubble
</li></ul>
</div>
</div>


<div class="box250">
<h3 class="blank">&nbsp;</h3>
<ul class="cssplay">
<li><a href="http://www.uk-cheapest.co.uk/">Register Domain Name</a></li>
<li><a href="http://www.webcreationuk.com/">website design</a> company providing number 1 services for website design and SEO</li>
<li><a href="http://www.online-artikel.de/">Online PR-Portal</a> <b>Social Media News</b><br><span class="text">Our Press releases you can read on OA News</span></li>
<li><a href="http://www.justsearching.co.uk/">Search engine optimisation</a><span class="text"><br>Search engine optimisation specialists to companies throughout the UK and the World</span></li>
<li><a href="http://www.hitsearchlimited.com/seo.php">SEO</a></li>
<li><span class="text">For your one stop shop for all your digital marketing including <a href="http://www.propadesign.co.uk/">web design</a> use propaganda</span></li>
<li><a href="http://www.biteus.net/">SEO</a></li>
<li><a href="http://www.marketingquotes.co.uk/website-design/">website designers</a>&nbsp;Compare local website design prices today</li>
<li><a href="http://www.lava.com.au/">Web Design</a></li>
</ul>
</div>



<div class="box250">
<h3>CSS play Testimonial</h3>
<p>"The <a href="http://www.citroen.co.uk/" rel="nofollow"><img src="%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95_files/citroenlogo.gif" alt="citroen.co.uk"></a> web site uses<br>CSS play code for the site drop down menus.<br>This code works seamlessly in IE 6 &amp; 7, and is an excellent solution to the Creative requirements of the site."<br><br>
Damon Clark - Brandwidth</p>
</div>
<div class="box250">
<h3>CSS play Links</h3>
<ul>
<li><a href="http://www.cssplay.co.uk/favicon_ads.html">Favicon Advertising</a></li>
<li><a href="http://www.cssplay.co.uk/ads_page.html">Advertising rates</a></li>
<li><a href="http://www.cssplay.co.uk/service.html">Web design &amp; assistance</a></li>
<li><a href="http://www.istu.co.uk/" rel="nofollow"><b>i Stu</b> - NEW website!</a></li>
</ul>
</div>
</div> <!-- end of right column -->
</div> <!-- end of content -->



	<div id="foot">
		<p>© 2005-2011 stu nicholls - cssplay.co.uk - all rights reserved</p>
		<ul>
		<li><a href="http://www.icra.org/sitelabel/" rel="nofollow">ICRA checked site</a></li>
		<li><a href="http://validator.w3.org/check/referer" title="Valid XHTML 1.0 Strict!" rel="nofollow">xhtml 1.0 Strict</a></li>
		<li><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.cssplay.co.uk/menus/cssplay23.html" title="Valid CSS!" rel="nofollow">css 1/2/3</a></li>
		</ul>
		</div>
	</div> <!-- end of wrapper -->

<div id="pulldown" class="close">
	<div id="opacity"></div>
	<div id="contents">

<div class="nav">
	<ul class="menu">
		<li class="top-li"><a class="top-a" href="http://www.cssplay.co.uk/menus/index.html">Home</a></li>
		<li class="top-li has-sub"><a class="top-a" href="http://www.cssplay.co.uk/menus/index.html">Collections<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul class="sub sub3">
				<li class="sub">
					<h5>Dresses</h5>
					<ul>
						<li><a href="#url">Floral Print</a></li>
						<li><a href="#url">Sleeveless</a></li>
						<li><a href="#url">Pure Cotton</a></li>
						<li><a href="#url">Linen Blend</a></li>
						<li><a href="#url">Buttoned</a></li>
					</ul>
					<h5>Coats &amp; Jackets</h5>
					<ul>
						<li><a href="#url">Silk Blend</a></li>
						<li><a href="#url">Cotton Rich</a></li>
						<li><a href="#url">Sleeveless</a></li>
						<li><a href="#url">Pure Linen</a></li>
					</ul>
				</li>
				<li class="sub">
					<h5>Jeans</h5>
					<ul>
						<li><a href="#url">Flared denim</a></li>
						<li><a href="#url">Bootleg</a></li>
						<li><a href="#url">Cropped</a></li>
					</ul>
					<h5>Knitwear</h5>
					<ul>
						<li><a href="#url">Cardigans</a></li>
						<li><a href="#url">Plain long sleeve jumpers</a></li>
					</ul>
					<h5>Socks</h5>
					<ul>
						<li><a href="#url">Plain Cotton</a></li>
						<li><a href="#url">Trainer</a></li>
						<li><a href="#url">Sports</a></li>
					</ul>
				</li>
				<li class="sub">
					<h5>Shirts &amp; Blouses</h5>
					<ul>
						<li><a href="#url">Pure Cotton</a></li>
						<li><a href="#url">Pure Silk</a></li>
						<li><a href="#url">Floral</a></li>
					</ul>
					<h5>Skirts</h5>
					<ul>
						<li><a href="#url">Pleated</a></li>
						<li><a href="#url">Belted</a></li>
						<li><a href="#url">Panelled</a></li>
						<li><a href="#url">Pencil</a></li>
						<li><a href="#url">Flared</a></li>
					</ul>
				</li>
				<li class="bottomLine">
					<p>Visit our <a href="http://www.cssplay.co.uk/menus/index.html">online store</a> for more bargains and special offers . . .</p>
					<p><a href="#url">Free delivery</a> on orders over £100.</p>
				</li>
			</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
		<li class="top-li has-sub"><a class="top-a" href="http://www.cssplay.co.uk/menus/index.html">Mail Order<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul class="sub sub2">
				<li class="sub">
					<h5>Electronics</h5>
					<ul>
						<li><a href="#url">Televisions</a></li>
						<li><a href="#url">DVD Players</a></li>
						<li><a href="#url">Mobiles</a></li>
						<li><a href="#url">Games Consoles</a></li>
					</ul>
					<h5>Wine</h5>
					<ul>
						<li><a href="#url">Red</a></li>
						<li><a href="#url">White</a></li>
						<li><a href="#url">Rose</a></li>
						<li><a href="#url">Sparkling</a></li>
					</ul>
				</li>
				<li class="sub">
					<h5>Furniture</h5>
					<ul>
						<li><a href="#url">Garden furniture</a></li>
						<li><a href="#url">Sofas</a></li>
						<li><a href="#url">Dining chairs</a></li>
						<li><a href="#url">Beds</a></li>
					</ul>
				</li>
				<li class="bottomLine">
					<p>Special offer on all <a href="#url">Microwaves</a> - 50% OFF!</p>
				</li>
			</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
		<li class="top-li has-sub"><a class="top-a" href="http://www.cssplay.co.uk/menus/index.html">Special Offers<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul class="sub sub1">
				<li class="sub">
					<h5>Meanswear</h5>
					<ul>
						<li><a href="#url">Half price shirts</a></li>
						<li><a href="#url">30% off Suits</a></li>
						<li><a href="#url">Half price shoes</a></li>
						<li><a href="#url">2 for 1 Shirts</a></li>
					</ul>
					<h5>Kidswear</h5>
					<ul>
						<li><a href="#url">Half price shirts</a></li>
						<li><a href="#url">2 for 1 T shirts</a></li>
						<li><a href="#url">1/3 off trainers</a></li>
					</ul>
				</li>
				<li class="bottomLine">
					<p>More <a href="#url">offers</a> online.</p>
				</li>
			</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
		<li class="top-li has-sub"><a class="top-a" href="http://www.cssplay.co.uk/menus/index.html"><span>Accessories</span><b></b><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul class="sub sub3 left1">
				<li class="sub">
					<h5>Scarves</h5>
					<ul>
						<li><a href="#url">Silk</a></li>
						<li><a href="#url">Chiffon</a></li>
						<li><a href="#url">Crinkle</a></li>
						<li><a href="#url">Butterfly</a></li>
						<li><a href="#url">Tassel</a></li>
					</ul>
					<h5>Belts</h5>
					<ul>
						<li><a href="#url">Leather</a></li>
						<li><a href="#url">Elasticated</a></li>
						<li><a href="#url">Reversible</a></li>
					</ul>
				</li>
				<li class="sub">
					<h5>Necklaces</h5>
					<ul>
						<li><a href="#url">Pendant</a></li>
						<li><a href="#url">Pearl</a></li>
						<li><a href="#url">Drop</a></li>
					</ul>
					<h5>Earrings</h5>
					<ul>
						<li><a href="#url">Party</a></li>
						<li><a href="#url">Silver</a></li>
						<li><a href="#url">Gold</a></li>
						<li><a href="#url">Stud</a></li>
					</ul>
					<h5>Rings</h5>
					<ul>
						<li><a href="#url">Diamond</a></li>
						<li><a href="#url">Pearl</a></li>
						<li><a href="#url">Emerald</a></li>
					</ul>
				</li>
				<li class="sub">
					<h5>Handbags</h5>
					<ul>
						<li><a href="#url">Shopper</a></li>
						<li><a href="#url">Tote</a></li>
						<li><a href="#url">Shoulder</a></li>
						<li><a href="#url">Beach</a></li>
						<li><a href="#url">Leather</a></li>
						<li><a href="#url">Clutch</a></li>
						<li><a href="#url">Mock Crocodile</a></li>
					</ul>
				</li>
				<li class="bottomLine">
					<p>Why not treat yourself to a <a href="#url">makeover</a> in our cosmetic department.</p>
				</li>
			</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
		<li class="top-li"><a class="top-a" href="http://www.cssplay.co.uk/menus/index.html">Contact Us</a></li>
		<li class="top-li"><a class="top-a last" href="http://www.cssplay.co.uk/menus/index.html">Where to Find Us</a></li>
	</ul>
</div>
<div id="lowerContent">
<dl>
<dt>Heading One</dt>
<dd>Ut pharetra, ante eget imperdiet ullamcorper, tortor nunc 
sollicitudin orci, non cursus neque nisl eget ligula. Lorem ipsum dolor 
sit amet, consectetur adipiscing elit. Duis vestibulum, nibh in suscipit
 interdum, velit magna volutpat turpis, at ornare sem magna et tellus. <a href="http://www.cssplay.co.uk/menus/index.html">Sed pulvinar facilisis</a>
 ligula, id vehicula eros sollicitudin a. Pellentesque habitant morbi 
tristique senectus et netus et malesuada fames ac turpis egestas.</dd>
</dl>
<dl>
<dt>Heading Two</dt>
<dd>Vivamus vestibulum, augue id iaculis sodales, odio odio feugiat arcu, scelerisque congue nisi ipsum vitae orci. <a href="http://www.cssplay.co.uk/menus/index.html">Nunc sed ligula quam</a>.
 Cras sed iaculis neque. Proin ultricies consectetur tortor, eu pulvinar
 sapien commodo ac. Cras diam arcu, lacinia id mattis ut, convallis sed 
massa. <a href="http://www.cssplay.co.uk/menus/index.html">Nullam</a> ut arcu lacus. Suspendisse ultricies elementum arcu ut dictum.</dd>
</dl>
<dl>
<dt>Heading Three</dt>
<dd>Sed aliquet augue ut ligula porta gravida pellentesque sapien 
semper. Duis mauris massa, semper pulvinar eleifend id, tincidunt 
fermentum nulla. Proin ipsum neque, imperdiet in vestibulum non, 
hendrerit ac nisi. Maecenas eleifend libero quis urna lacinia elementum.
 <a href="http://www.cssplay.co.uk/menus/index.html">Etiam mi massa</a>, sollicitudin nec accumsan in, aliquet in dui. Pellentesque consequat diam quis felis luctus a vehicula lectus mollis.</dd>
</dl>
</div>
 	</div>
		<a href="#pulldown" id="pull">Pull Down Menu</a>
		<a href="#x" id="push">Close Menu</a>
</div>


<script src="%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95_files/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-451410-1";
urchinTracker();
</script>

</body></html>